<template>
  <div class="login subpage">
    <My-head title="登录">
      <van-icon name="revoke" color="#f50" class="hicon" />
    </My-head>

    <!-- 2种登录方式 -->
    <van-tabs v-model="active" title-active-color="deeppink" swipeable sticky>
        
        <!-- 1. 账密登录 -->
      <van-tab title="用户名登录" name="1">
        <Login-account></Login-account>
      </van-tab>
      
      <!-- 2. 手机号+验证码 -->
      <van-tab title="手机号登录" name="2">
        <Loginsms></Loginsms>
      </van-tab>

    </van-tabs>

  </div>
</template>

<script>
import LoginAccount from './loginAccount.vue'
import Loginsms from './loginsms.vue'

export default {
    data () {
        return {
            active: '1'
        }
    },
    components: {
        LoginAccount,
        Loginsms
    }
}
</script>

<style lang="scss" scoped>

.login {
    ::v-deep .van-tabs__line {
      background-color: deeppink;
    }
}

</style>